<template>
  <s-layout title="企业详细">
    <view class="box">
      <view class="top radius card-menu">
        <view class="avatar">
          <image
            class="avatar-img"
            :src="companyInfo.image"
            mode="aspectFill"
          ></image>
          <view class="avatar-massage">
            <view class="avatar-massage1">{{ companyInfo.name }}</view>
          </view>

          <view
            class="avatar-right"
            @click="
              sheep.$router.go('/pages/other/update', { id: companyInfo.id })
            "
          >
          <fui-tag
              text="编辑"
              color="#fff"
              shape="circleRight"
              background="rgb(255, 255, 255,0)"
              theme="plain"
              :isBorder="false"
              style="
                position: absolute;
                right: 0rpx;
                top: 50rpx;
                border-radius: 30rpx 0 0 30rpx;
                background: linear-gradient(45deg, #2b85e4, #0052d9);
                color: #fff;
                padding: 6rpx 8rpx;
              "
            >
            </fui-tag>
          </view>
        </view>

        <view class="top-center">
          <view class="top-center-top">
            <view class="top-center-item">
              <view
                style="
                  max-width: 10em; /* 中文约10字 */
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                企业规模： {{ companyInfo.company_scale }}
              </view>
            </view>
          </view>
          <view class="top-center-center">
            <view class="top-center-item">
              <view
                style="
                  max-width: 500rpx; /* 中文约10字 */
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                公司类型：{{
                 companyInfo.tpc_type
                }}
              </view>
            </view>
          </view>
          <view> </view>
        </view>
        <view class="top-center">
          <view class="top-center-item"></view>
          <view
            style="
              max-width: 500rpx; /* 中文约10字 */
              white-space: nowrap;
              margin-bottom: 20rpx;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            经营内容：{{ companyInfo.operate }}</view
          >
        </view>
        <view class="top-line"></view>
        <view class="top-bottom">
          <view class="top-bottom-left" style="color: #dddedf">
            <view class="top-bottom-left-title">经营地址：</view>
            <view class="top-bottom-left-contnat">{{
              companyInfo.address
            }}</view>
          </view>
        </view>
        <view style="height: 5rpx"></view>
      </view>
      
      <!-- 修改后的企业成员部分 -->
      <view
        class="container_background_grey radius"
        style="margin: 20rpx auto 0"
      >
        <view class="container_background_grey_center">
          <view class="index_title spaceBetween">
            <view class="index_title_left">企业成员</view>
            <view class="index_title_right">
              <view class="center index_member" @click="goPeopleList()">
                全部成员
                <fui-icon
                  name="arrowright"
                  color="#5A5A5A"
                  size="32"
                ></fui-icon>
              </view>
              <image :src="manyImage" />
            </view>
          </view>

          <!-- 上半部分：成员详细信息卡片 -->
          <view class="member-card">
            <view class="member-info">
              <image
                class="member-avatar"
                :src="peopleList[current].avatar"
                mode="aspectFill"
              />
              <view class="member-details">
                <view class="member-name">{{ peopleList[current].name }}</view>
                <view class="member-position">{{
                  peopleList[current].position
                }}</view>
                <view class="member-contacts">
                  <text class="contact-item"
                    >电话：{{ peopleList[current].phone }}</text
                  >
                </view>
              </view>
            </view>
          </view>

          <!-- 下半部分：成员头像滚动 -->
          <view class="member-scroll-container">
            <scroll-view
              class="member-scroll"
              scroll-x="true"
              show-scrollbar="false"
            >
              <view
                v-for="(item, index) in peopleList"
                :key="index"
                class="scroll-item"
                :class="{ active: current === index }"
                @click="changePeople(index)"
                style="margin: 0 10rpx"
              >
                <image
                  class="member-thumb"
                  :src="item.avatar"
                  mode="aspectFill"
                  style="width: 100rpx; height: 100rpx; display: block"
                />
              </view>
            </scroll-view>
          </view>
        </view>
      </view>

      <!-- 企业档案部分 -->
      <view
        class="container_background_grey radius archive-entry-card"
        style="margin: 20rpx auto 0"
        @click="goToArchivesList"
      >
        <view class="container_background_grey_center">
          <view class="index_title spaceBetween">
            <view class="index_title_left">
              <view class="title-with-icon">
                <fui-icon name="file-text" color="#0052d9" size="40"></fui-icon>
                <text>企业档案管理</text>
              </view>
            </view>
            <view class="index_title_right">
              <text class="view-details-text">查看与上传</text>
              <fui-icon name="arrowright" color="#5A5A5A" size="32"></fui-icon>
            </view>
          </view>
          <view class="archive-summary">
            <text>集中管理企业营业执照、经营许可证、资质证书等重要文件。</text>
          </view>
        </view>
      </view>
      <view style="padding-bottom: 40rpx"></view>
    </view>
  </s-layout>
</template>

<script setup lang="ts">
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import sheep from "@/sheep";
import other from "@/sheep/api/other";

// 定义响应式数据
const manyImage = ref(""); // 你的图片路径
const companyInfo = reactive({
  id: 1,
  name: "海东路第一加油站",
  address: "北京东城区新区",
  phone: "18702362584",
  legal: "张俊杰",
  image: "",
  company_scale: "1000人",
  category_id_f: "加油站",
  category_id_c: "加油站",
  tpc_type:"",
  operate: "",
  risk_rank: "非常高",
  risk_type: "安全风险",
  deptInfo: {
    name: "城北消防站",
    // status: "正常",
    address: "北京市海淀区西北旺东路10号",
    phone: "010-12345678",
    manager: "张伟",
  },
  thirdPartyInfo: {
    name: "安全消防器材有限公司",
    // status: "正常",
    type: "消防设备供应商",
    address: "北京市海淀区中关村南大街5号",
    phone: "010-66889900",
    contact: "王小明",
  },
  archive: [
    {
      name: "营业执照",
      images: [
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.qI9PYqJr0Aee3Tdzf05wwAHaE_?w=294&h=198&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.qI9PYqJr0Aee3Tdzf05wwAHaE_?w=294&h=198&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.qI9PYqJr0Aee3Tdzf05wwAHaE_?w=294&h=198&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.qI9PYqJr0Aee3Tdzf05wwAHaE_?w=294&h=198&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      ],
    },
    {
      name: "经营证书",
      images: [
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.AaZvLVeK0fi6XmA5XkBq3gHaFR?w=259&h=184&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      ],
    },
  ],
});
const peopleList = reactive([
  {
    name: "张俊杰",
    achievement: "成员成就",
    avatar:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.wxEXZ6K-ZsEYHsI2JsXNywHaE8?w=242&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    position: "法人",
    email: "2882559942@qq.com",
    phone: "187****2584",
  },
  {
    name: "王铭俊",
    achievement: "获得多项提名",
    avatar:
      "https://tse2-mm.cn.bing.net/th/id/OIP-C.JJRFzNT3vtX1EunSk-syggAAAA?w=173&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    position: "总裁",
    email: "2882559942@qq.com",
    phone: "122****2534",
  },
  {
    name: "李晓萱",
    achievement: "获得多项提名",
    avatar:
      "https://tse2-mm.cn.bing.net/th/id/OIP-C.s4VnDNVMKcWP0fbt3pD5qAAAAA?w=179&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    position: "执行经理",
    email: "2882559942@qq.com",
    phone: "127****5784",
  },
]);
// const people = ref([
//   "https://tse3-mm.cn.bing.net/th/id/OIP-C.wxEXZ6K-ZsEYHsI2JsXNywHaE8?w=242&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse2-mm.cn.bing.net/th/id/OIP-C.JJRFzNT3vtX1EunSk-syggAAAA?w=173&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse2-mm.cn.bing.net/th/id/OIP-C.s4VnDNVMKcWP0fbt3pD5qAAAAA?w=179&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse2-mm.cn.bing.net/th/id/OIP-C.Cd0hnEa7nOiesT3igC2YMAAAAA?w=179&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse2-mm.cn.bing.net/th/id/OIP-C.rnWPBrBZm2oKXBGMYzBDawAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse4-mm.cn.bing.net/th/id/OIP-C.niLUr_Yu2Q-HOTpzKd95iAAAAA?w=164&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse3-mm.cn.bing.net/th/id/OIP-C.v4_NLP_RKmA_0pRyK0hKBwAAAA?w=210&h=209&c=7&r=0&o=5&dpr=1.5&pid=1.7",
//   "https://tse1-mm.cn.bing.net/th/id/OIP-C.N_msAr5FxErn-Upzco0bqgAAAA?w=196&h=196&c=7&r=0&o=5&dpr=1.5&pid=1.7",
// ]);
const current = ref(0);
const upLoadrUrl = ref(
  "https://assess.yuejin-tech.com/app_api.php?t=company&s=company&op=image_upload"
);

// 新增编辑状态控制
const isEditing = ref(false);

// 切换编辑状态
const toggleEdit = () => {
  isEditing.value = !isEditing.value;

  // 如果退出编辑模式且有未保存的更改，可以在此处添加保存逻辑
  if (!isEditing.value && imageStatus.value === "success") {
    uni.showToast({ title: "修改已保存", icon: "success" });
  }
};

// 上传状态，用于保存或其他操作时做判断
const imageStatus = ref("");

// 上传成功时触发
const imageSuccess = (e) => {
  console.log(e);
  // e.res 为服务器返回数据
  // 上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
  const res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}");
  imageStatus.value = e.status;
  if (res.data.url) {
    // 处理结果返回给组件
    // res.data.url 为上传成功后返回的图片地址
    // e.index 为图片索引值
    imageUpload.value.result(res.data.url, e.index);

    // 将上传成功的图片地址添加到 formData.images 数组中
    formData.value.images.push(res.data.url);
  }
};

// 上传失败时触发
const imageError = (e) => {
  imageStatus.value = e.status;
};

// 选择图片或上传完成时触发
const imageComplete = (e) => {
  imageStatus.value = e.status;
  if (imageStatus.value === "success" && e.action === "upload") {
    uni.showToast({ title: "上传完成！", icon: "success" });
    // 打印 formData.images 数组，查看已上传的图片地址
    console.log("上传成功的图片地址列表:", formData.value.images);
  }
};

// 保留原有的其他方法
const goEdit = () => {
  uni.navigateTo({
    url: `/pages/other/update?companyId=${companyInfo.id}`,
  });
};

const goPeopleList = () => {
  uni.navigateTo({
    url: `/pages/other/peopleList/detail?companyId=${companyInfo.id}`,
  });
};

const scroll = (event) => {
  // 处理滚动事件
};

const changePeople = (index) => {
  current.value = index;
  // 处理切换嘉宾逻辑
};

// 获取企业详细信息的方法
const fetchCompanyInfo = async (companyId) => {
  try {
    const response = await other.getThirdPartyCompanyInfo({
      third_company_id: sheep.$store("user").userInfo.company_id || companyId,
    });
    console.log("response", response);
    const data = response;
    companyInfo.id = data.third_company_Info.tpc_id;
    companyInfo.name = data.third_company_Info.tpc_name;
    companyInfo.address = data.third_company_Info.tpc_address;
    companyInfo.image = data.third_company_Info.tpc_image;
    companyInfo.phone = data.third_company_Info.tpc_phone;
    companyInfo.legal = data.third_company_Info.tpc_legal_rep;
    companyInfo.company_scale = data.third_company_Info.tpc_company_scale;
    companyInfo.tpc_type = data.third_company_Info.tpc_type;
    companyInfo.risk_rank = data.third_company_Info.tpc_risk_rank;
    companyInfo.risk_type = data.third_company_Info.tpc_risk_type;
    companyInfo.operate = data.third_company_Info.tpc_operate;
    // 更新 peopleList
    peopleList.splice(0, peopleList.length);
    data.third_company_user_list.forEach((user) => {
      peopleList.push({
        name: user.tpu_name,
        phone: user.tpu_phone,
        avatar: user.tpu_avatarUrl,
        position: user.tpu_job,
        email: user.tpu_email,
        achievement: "", // 添加默认的 achievement 属性
      });
    });
    console.log("peopleList", peopleList);
  } catch (error) {
    console.error("Error fetching company info:", error);
  }
};

// 创建事件监听函数
const handleDataUpdate = (event) => {
  console.log('其他企业详情页收到数据更新事件，准备刷新数据', event);
  // 使用延迟确保DOM已完全渲染
  setTimeout(() => {
    console.log('开始刷新其他企业详情数据');
    if (companyInfo.id) {
      fetchCompanyInfo(companyInfo.id);
    }
  }, 100); // 短暂延迟确保DOM已渲染
};

// 在组件加载时获取企业详细信息
onLoad((options) => {
  if (options && options.companyId) {
    fetchCompanyInfo(options.companyId);
  } else {
    fetchCompanyInfo(sheep.$store("user").userInfo.company_id);
  }
  
  // 注册事件监听
  uni.$on('otherCompanyDataUpdated', handleDataUpdate);
});

// 在页面卸载时移除事件监听
onUnload(() => {
  console.log('页面卸载，移除事件监听');
  uni.$off('otherCompanyDataUpdated', handleDataUpdate);
});

const goToArchivesList = () => {
 
  uni.navigateTo({
    url: `/pages/other/archives/list?companyId=${
      companyInfo.id
    }&companyName=${encodeURIComponent(companyInfo.name)}`,
  });
};
const imgUrl = [
  
];
</script>

<style scoped lang="scss">
@import "/src/sheep/scss/icon/_coloricon";
@import "/src/sheep/scss/icon/_icon";

page {
  background-color: #f0f3f8;
}

.icon {
  color: #fff;
  font-size: 28rpx;
}

.box {
  /* background: linear-gradient(135deg, #dde7f6, #dde7f6 30%, #fff 70%, #f8e5d9 95%, #f8e5d9); */
  padding-top: 10rpx;
  height: 100vh;
}

.box {
  /* display: flex;
  flex-direction: column;
  gap: 20rpx;  */
  /* 统一卡片间距 */
}

.top {
  width: 96%;
  background: linear-gradient(45deg, #3772ff 0%, #7aabff 50%, #bbe1fa 100%);
  margin: 20rpx auto 0rpx auto;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.top-line {
  width: 92%;
  margin: 0 auto;
  border: 1.5rpx solid #ffffff49;
}

.avatar {
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
}

.avatar-img {
  background-color: #fff;
  border-radius: 50%;
  height: 100rpx;
  width: 100rpx;
  margin: 20rpx 20rpx;
  position: relative;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}
.avatar-right {
  display: flex;
  height: 50px;
  /* background-color: #ffffffd2;
      width:250rpx; */
  right: 0rpx;
  justify-content: center;
  align-items: center;
  border-radius: 40rpx 0rpx 0rpx 40rpx;
  font-size: 26rpx;
}
.list-item-right-tag {
  position: relative;
}
.top-center {
  color: #ffffff;
  display: flex;
  font-size: 28rpx;
}
.top-center-top {
  margin-left: 30rpx;
  margin-top: 10rpx;
}
.top-center-item {
  font-size: 28rpx;
  display: flex;
  margin-right: 30rpx;
}
.top-center-center {
  margin: 020rpx;
  margin-top: 10rpx;
}
.label {
  color: #fff;
  width: 120rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
}
.radius {
  border-radius: 3%;
}
.avatar-massage {
  font-size: 36rpx;
  margin-left: 20rpx;
  color: #fff;
}

.avatar-massage1 {
  font-weight: 600rpx;
  margin: 10rpx 0;
  display: inline-block;
  max-width: 10em; /* 中文约10字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bottom {
  padding: 0 10rpx;
  border-radius: 12rpx;
  width: 94%;
  font-size: 28rpx;
  margin: 20rpx auto;
}
.top-bottom-left-title {
  font-weight: 500;
  color: #fff;
  position: relative;
  top: -5rpx;
  max-width: 10em; /* 中文约10字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bottom-left-contnat {
  
  font-weight: 500;
  color: #fff;
  position: relative;
  top: -5rpx;
  max-width: 500rpx; /* 中文约10字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bottom-left {
  margin-left: 2rpx;
  display: flex;
  color: #fff;
}

.center-bottom {
  width: 96%;
  background-color: #fff;
  margin: 30rpx auto 0rpx auto;
}

.title {
  font-weight: 600;
  position: relative;
  left: 20rpx;
  top: 20rpx;
}

.edit {
  position: relative;
  left: 580rpx;
  top: -18rpx;
  font-size: 25rpx;
  color: #666;
}

.center-avatar-detail {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 50rpx;
}

.center-avatar-detail-text {
  font-weight: 600;
}

.center-avatar-detail-subtitle {
  font-size: 24rpx;
  color: #666;
}

.center-avatar-detail-img {
  height: 100rpx;
  width: 100rpx;
  position: relative;
  top: -20rpx;
  border-radius: 50%;
}

.scroll-container {
  white-space: nowrap;
  margin-left: 20rpx;
  height: 10%;
}

.center-avatar {
  margin: -10rpx 0rpx;
}

.center-avatar-img {
  height: 115rpx;
  width: 115rpx;
  border-radius: 50%;
  margin: 20rpx 19rpx;
  border: 1px solid #999;
  border: #0038b1d2 2px solid;
}

.bottom {
  width: 96%;
  background-color: #fff;
  margin: 20rpx auto 0rpx auto;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.center-title {
  position: relative;
  left: 20rpx;
  top: 20rpx;
  font-weight: 600;
}

.bottom-img {
  width: 30%;
  height: 200rpx;
  border-radius: 6px;
  margin: 20rpx 5rpx;
}

.my-button {
  margin-top: 50rpx;
  width: 50%;
  border-radius: 30rpx;
  height: 70rpx;
  background-color: #0038b1;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 5px rgba(164, 161, 161, 0.5);
  margin-bottom: 50rpx;
}

.button-container {
  display: flex;
  justify-content: center;
}

.centers {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 字体渐变 */
.gradient-color {
  background-image: linear-gradient(to right, #0250c5 0%, #0250c59c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 公共标题 */
.index_title {
  display: flex;
  padding-top: 0px;
  padding-bottom: 0px;
}

.index_title_left {
  font-family: "阿里妈妈数黑体 Bold", sans-serif;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/rrtM1LP5iUzZ.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/o0Q3cO7cUfPA.woff")
      format("woff");
  font-display: swap;
}

.index_title_right {
  font-size: 12px;
  color: #5a5a5a;
  display: flex;
  font-weight: 550;
}

.index_title_right image {
  width: 20px;
  height: 20px;
}

.index_container {
  width: 92%;
  margin: 0 auto;
  padding: 10px 0;
}

.index_container_1 {
  width: 94%;
  margin: 0 auto;
  padding: 0;
}

.custom-image {
  height: 48rpx;
  width: 204rpx;
}

/* 功能按钮 */
.index_btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.index_btn_item {
  border-radius: 5px;
  height: 40px;
  width: 47%;
  background-image: linear-gradient(to left, #0250c59c 0%, #0250c5 100%);
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.container_background_grey {
  background-color: #fff;
  padding: 10px 0;
  width: 96%;
  box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.container_background_grey_center {
  width: 94%;
  margin: 0 auto;
}

.index_box {
  position: relative;
}

.index-header {
  position: absolute;
}

.index_logo {
  width: 160px;
  z-index: 99;
  margin-left: 20px;
}

.index-header-image {
  width: 100%;
  height: 500px;
}

.index-header-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.2);
}

.index-header-box {
  width: 92%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.index-header-title {
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  bottom: 110px;
}

.index-header-des {
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  margin-top: 20px;
  line-height: 22px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  bottom: 80px;
  color: #ffffff;
}

.index-header-button {
  height: 18px;
  width: 25%;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  bottom: 30px;
  color: #ffffff;
}

/* 滑块 */
.scroll-view_H {
  white-space: nowrap;
}

.scroll-view-item {
  height: 300px;
}

.scroll-view-item_H {
  display: inline-block;
  width: 180px;
  margin-right: 10px;
  vertical-align: top;
}

/* 不显示滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

/* 大会嘉宾 */
/* 上方展示 */
.peopleList_search_list_item {
  width: 94%;
  margin: 5px auto;
  border-radius: 8px;
  background-image: linear-gradient(
    20deg,
    rgba(249, 228, 223, 0.5) 1%,
    #ffffff 30%,
    #ffffff 70%,
    #f9e4df 100%
  );
}

.peopleList_search_list_item_top {
  display: flex;
  justify-content: space-between;
}

.peopleList_search_list_item_top_left {
  width: 30%;
}

.peopleList_search_list_item_top_right {
  width: 68%;
  display: flex;
  align-items: center;
}

.peopleList_search_list_item_top_left image {
  height: 65px;
  width: 65px;
  border-radius: 50%;
  float: right;
}

.peopleList_search_list_item_top_right_name {
  font-size: 14px;
  font-weight: 800;
}

.peopleList_search_list_item_top_right_desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgb(129, 129, 121);
  margin-top: 5px;
}

.peopleList_search_list_item_bottom {
  border-radius: 3px;
  padding: 11px 10px;
  margin-top: 10px;
  background-image: linear-gradient(20deg, #fdfbef 0%, #f6f0fa 100%);
}

.peopleList_search_list_item_bottom_top {
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.peopleList_search_list_item_bottom_bot {
  display: flex;
  justify-content: space-between;
}

/* 下方滑动 */
.index_people {
  height: 265px;
}

.scroll-view-item_H_1 {
  display: inline-block;
  margin-right: 15px;
  vertical-align: top;
  margin-top: 8px;
}

.small {
  width: 58px;
  height: 58px;
}

.border {
  background-image: linear-gradient(to left, #1026ecb7 0%, #6713d2 100%);
  border-radius: 50%;
}

.index_people_image {
  border-radius: 50%;
}

.index_people_name {
  font-size: 15px;
  font-weight: 600;
  color: rgb(51, 51, 51);
  text-align: center;
  margin-top: 10px;
}

.index_people_desc {
  font-size: 12px;
  color: #5a5a5a;
  text-align: center;
  margin-top: 3px;
  white-space: normal;
}

/* 编辑 */
.list-item-right-tag-box {
  background-color: #e9ecef;
  display: flex;
  justify-content: center;
  line-height: 60rpx;
  width: 160rpx;
  height: 60rpx;
  margin-bottom: 5rpx;
  border-radius: 30rpx 0 0 30rpx;
  position: relative;
  left: 19.5rpx;
}

.list-item-right-tag-box-text {
  height: 30rpx;
  font-size: 24rpx;
  font-weight: 550;
  color: #0038b1;
}

.index_member {
  font-size: 26rpx;
  font-weight: 550;
  position: relative;
  left: 20rpx;
}

.list-item-right-tag-box2 {
  background-color: #e9ecef;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 2rpx 13rpx;
  border-radius: 8px;
}

.list-item-right-tag-box-text2 {
  height: 28rpx;
  font-size: 22rpx;
  font-weight: 550;
  color: #0038b1;
}

.list-item-right-tag-box3 {
  background-color: #efece9;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 2rpx 13rpx;
  border-radius: 8px;
}

.list-item-right-tag-box-text3 {
  height: 28rpx;
  font-size: 22rpx;
  font-weight: 550;
  color: #ff9966;
}

.list-item-right-tag-box4 {
  background-color: #efece9;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 2rpx 13rpx;
  border-radius: 8px;
}

.list-item-right-tag-box-text4 {
  height: 28rpx;
  font-size: 22rpx;
  font-weight: 550;
  color: #0038b1;
}

/* 新增样式 */
.member-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx 0;
  box-shadow: 0 4rpx 24rpx rgba(0, 56, 177, 0.1);
}

.member-info {
  display: flex;
  align-items: center;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.member-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 2rpx solid #0038b1;
}

.member-details {
  flex: 1;
}

.member-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.member-position {
  font-size: 23rpx;
  font-weight: 550;
  color: #0038b1;
  background: #f0f3f8;
  padding: 6rpx 16rpx;
  border-radius: 8px;
  display: inline-block;
}

.member-contacts {
  margin-top: 20rpx;
}

// .contact-item {
//   display: block;

//   font-size: 26rpx;
//   font-weight: 500;
//   color: #666;
//   line-height: 1.6;
// }

.member-achievement {
  padding-top: 30rpx;
  font-size: 26rpx;
  color: #444;
  line-height: 1.6;
}

.achievement-title {
  color: #0038b1;
  font-weight: 500;
}

/* 成员滚动列表 */
.member-scroll-container {
  margin-top: 40rpx;
}

.member-scroll {
  white-space: nowrap;
  width: 100%;
  padding: 0rpx 0;
}

.scroll-item {
  display: inline-block;
  margin-right: 30rpx;
  position: relative;
  transition: transform 0.3s ease;
}

.member-thumb {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;

  .active & {
    border-color: #0038b1;
    transform: scale(1);
  }
}

.video-section {
  position: relative;
  background: #000;
  width: 90%;
  margin: 20rpx auto;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    background: linear-gradient(transparent, #ecf5ff);
  }
}

.form-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 0rpx;
  margin-bottom: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.1);
}

/* 部门卡片样式 */
/* 页面容器 */
.affiliation-container {
  background-color: #f5f7fa;
}

/* 底部圆角 */
.bottom.radius {
  border-radius: 0 0 24rpx 24rpx;
  overflow: hidden;
}

/* 中心标题区域 */
.center-title {
}

/* 标题样式 */
.index_title_left {
  font-size: 32rpx;
  font-weight: bold;
  color: #1a1a1a;
}

/* 表单卡片 */
.form-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 部门卡片样式 */
.department-container {
  padding: 10rpx 30rpx;
}

/* 卡片头部 */
.card-header2 {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 图标样式 */
.fire-icon,
.company-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 48rpx;
  margin-right: 20rpx;
}

.fire-icon {
  background-color: #ffe5e5;
  color: #e64340;
}

.company-icon {
  background-color: #e6f7ff;
  color: #2080f0;
}

/* 头部信息 */
.header-info {
  flex: 1;
}

/* 部门名称 */
.department-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 10rpx;
}

/* 状态标签 */
.status-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  background-color: #ffe5e5;
  color: #e64340;
  border-radius: 40rpx;
  font-size: 20rpx;
}

/* 联系方式区域 */
.contact-section {
  margin-top: 15rpx;
}

/* 联系方式项 */
.contact-item {
  display: flex;
  font-size: 26rpx;
  font-weight: 500;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.contact-item:last-child {
  margin-bottom: 0;
}

/* 联系方式图标 */
.contact-icon {
  font-size: 20rpx;
  margin-right: 16rpx;
  // min-width: 36rpx;
}

/* 联系方式信息 */
.contact-info {
  font-size: 20rpx;
  color: #666666;
  // line-height: 1.5;
}

/* 空状态 */
.empty-state {
  padding: 60rpx 0;
  text-align: center;
  color: #999999;
  font-size: 28rpx;
}

// 企业档案
/* 新增编辑按钮样式 */
.edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 24rpx;
  border-radius: 40rpx;
  background-color: #f5f7fa;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-right: 10rpx;
}

.edit-button .edit-icon {
  margin-right: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-button text {
  font-size: 24rpx;
  color: #5a5a5a;
  font-weight: 500;
}

.edit-active {
  background: linear-gradient(45deg, #0052d9, #2b85e4);
  box-shadow: 0 4rpx 12rpx rgba(43, 133, 228, 0.3);
}

.edit-active text {
  color: #fff;
}

/* 文件上传组件样式优化 */
.upload-item {
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}

.container_background_grey {
  background-color: #fff;
  padding: 10px 0;
  width: 96%;
  margin: 20rpx auto 0; // Consistent margin
  border-radius: 16rpx; // Softer radius
  box-shadow: 0 6rpx 18rpx rgba(0, 45, 115, 0.08); // Subtle shadow
}

.container_background_grey_center {
  width: 92%; // Slightly more padding inside
  margin: 0 auto;
}

.index_title_left {
  font-family: "阿里妈妈数黑体 Bold", sans-serif; // Add fallback
  font-size: 32rpx;
  color: #333; // Darker color
  font-weight: bold; // Ensure boldness
}

.archive-entry-card {
  cursor: pointer; // Indicate clickable
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(0, 45, 115, 0.1);
  }
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.view-details-text {
  font-size: 26rpx;
  color: #5a5a5a;
  margin-right: 8rpx;
}

.archive-summary {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
</style>
